<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>DD平台管理系统</title>

 <script src="EChart/echarts.min.js"></script>
<!-- 引入bootstrap样式 -->
<link
	href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css"
	rel="stylesheet">
<!-- 引入bootstrap-table样式 -->
<link
	href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css"
	rel="stylesheet">

<!-- jquery -->
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script
	src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- bootstrap-table.min.js -->
<script
	src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<!-- 引入中文语言包 -->
<script
	src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
<link rel="stylesheet" href="layui/css/layui.css">
  
<style type="text/css">
a:hover {
	text-decoration: none;
}

a:link {
	text-decoration: none;
}

a:visited {
	text-decoration: none;
}

a:active {
	text-decoration: none;
}
</style>
</head>

<body class="layui-layout-body">
<!-- 编辑 -->
	<div class="modal fade" id="myModal_edit" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title">更改套餐价格</h4>
				</div>
				<div class="modal-body">
					<form class="layui-form" action="">
						<div class="layui-form-item" style="margin-left: 20%">
							<label class="layui-form-label" style="width: 100px">套餐类型</label>
							<label class="layui-form-label" style="width: 100px" id="t_type"></label>
						</div>
						<div class="layui-form-item" style="margin-left: 20%">
							<label class="layui-form-label" style="width: 100px">套餐价格</label>
							<div class="layui-input-block">
								<input type="text" name="title" lay-verify="required|number"
									autocomplete="off" placeholder="自定义价格" class="layui-input"
									id="t_price" style="width: 50%;">
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" data-dismiss="modal" id="change">提交更改</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
	<!-- 删除 -->
	<div class="modal fade" id="myModal_delete" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">确认删除</h4>
				</div>
				<div class="modal-body">
					<form>
						<label id="s_type" style="margin-left: 25%; font-size: 20px"></label>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" data-dismiss="modal" id="delete">确认</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
	<!-- 新增 -->
	<div class="modal fade" id="myModal_add" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">新增套餐</h4>
				</div>
				<div class="modal-body">
					<form class="layui-form" action="">
						<div class="layui-form-item" style="margin-left: 20%">
							<label class="layui-form-label" style="width: 100px;">套餐类型</label>
							<div class="layui-input-block">
								<input type="text" name="title" lay-verify="title"
									autocomplete="off" placeholder="自定义套餐名" class="layui-input"
									id="a_ttype" style="width: 50%;">
							</div>
						</div>
						<div class="layui-form-item" style="margin-left: 20%">
							<label class="layui-form-label" style="width: 100px">套餐时长</label>
							<div class="layui-input-block">
								<input type="text" name="title" lay-verify="required|number"
									autocomplete="off" placeholder="请输入时长(年单位)" class="layui-input"
									id="a_tyear" style="width: 50%;">
							</div>
						</div>
						<div class="layui-form-item" style="margin-left: 20%">
							<label class="layui-form-label" style="width: 100px">套餐价格</label>
							<div class="layui-input-block">
								<input type="text" name="title" lay-verify="required|number"
									autocomplete="off" placeholder="自定义套餐价格" class="layui-input"
									id="a_price" style="width: 50%;">
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" lay-submit="" class="btn btn-primary" data-dismiss="modal" id="add">确认</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header">
			<div class="layui-logo">平台管理系统</div>
			<!-- 头部区域（可配合layui已有的水平导航） -->
			<ul class="layui-nav layui-layout-right">
				<li class="layui-nav-item"><a href="javascript:;"> <img
						src="http://t.cn/RCzsdCq" class="layui-nav-img"> 贤心
				</a>
					<dl class="layui-nav-child">
						<!-- <dd><a href="">消息<span class="layui-badge">99+</span></a></dd> -->
					</dl></li>
				<li class="layui-nav-item"><a href="logout">退了</a></li>
			</ul>
		</div>

		<div class="layui-side layui-bg-black">
			<div class="layui-side-scroll">
				<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
				<ul class="layui-nav layui-nav-tree" lay-filter="test">
					<li class="layui-nav-item "><a href="javascript:;">影院管理</a>
						<dl class="layui-nav-child">
							<dd>
								<a href="check.html">查看影院</a>
							</dd>
							<dd>
								<a href="approve.html">认证处理</a>
							</dd>
							<dd>
								<a href="feedback.html">反馈处理</a>
							</dd>
						</dl></li>
					<li class="layui-nav-item  layui-nav-itemed"><a
						href="comboset.html">套餐设置</a></li>
				</ul>
			</div>
		</div>


		<div class="layui-body" style="background-color: #F2F2F2;">
			<!-- 内容主体区域 -->
			<div
				style="padding: 20px; background-color: #F2F2F2; margin: 2% auto">
				<div class="layui-row layui-col-space15">
					<div class="layui-col-md15">
						<div class="layui-card">
							<div class="layui-card-header">套餐详情</div>
							<div class="layui-card-body">
								<div style="margin: 1% auto; width: 80%;">
									<table id="table">
									</table>
									<button type="button" class="layui-btn layui-btn-normal"
										onclick="toadd()" style="margin-left: 90%; margin-top: 2%">新增套餐</button>
								</div>
							</div>
						</div>
					</div>
					<div class="layui-col-md15">
						<div class="layui-card">
							<div class="layui-card-header">套餐购买比例</div>
							<div class="layui-card-body" >
								<div id="count_chart" style="width:100%;height: 355%"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-footer ">
				<!-- 底部固定区域 -->
				© 版权归DD平台所有
			</div>
		</div>
		<script>
			var myChart = echarts.init(document.getElementById('count_chart'));
			// 指定图表的配置项和数据
			

			myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画 */
			$.ajax({
				type : "get",
				async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
				url : "combo/getComboCount", //请求发送
				data : {},
				success : function(result) {
						myChart.hideLoading(); //隐藏加载动画
						myChart.setOption({
							tooltip : {
								trigger : 'item',
								formatter : "{a} <br/>{b}: {c} ({d}%)"
							},
							legend : {
								orient : 'vertical',
								x : 'left',
								data : result
							},
							series : [ {
								name : '套餐购买比例',
								type : 'pie',
								radius : [ '50%', '70%' ],
								avoidLabelOverlap : false,
								label : {
									normal : {
										show : false,
										position : 'center'
									},
									emphasis : {
										show : true,
										textStyle : {
											fontSize : '30',
											fontWeight : 'bold'
										}
									}
								},
								labelLine : {
									normal : {
										show : false
									}
								},
								data : result
							} ]
						});
					},
				error : function(errorMsg) {
					//请求失败时执行该函数
					alert("图表请求数据失败!");
					myChart.hideLoading();
				}
			}) 
		</script>
		<script>
			var $table = $('#table');
			$(window).resize(function() {
				//防止表头与表格不对齐
				$table.bootstrapTable('resetView');
			});
			function addFunctionAlty(value, row, index) {
				return [
						'<button type="button" class="edit layui-btn layui-btn-xs" style="background-color: white;color: #337AB7;border: #337AB7 1px solid">编辑</button>',
						'<button type="button" class="delete layui-btn layui-btn-danger layui-btn-xs" style="background-color: white;color: coral;border: coral 1px solid">删除</button>', ]
						.join('');
			}
			window.operateEvents = {
				'click .edit' : function(e, value, row, index) {
					$("#t_type").text(row.ttype);
					$("#t_price").attr("placeholder", "原定价格" + row.tprice);
					$("#change").attr("onclick","to_change("+row.tid+")");
					$("#myModal_edit").modal('show');
				},
				'click .delete' : function(e, value, row, index) {
					$("#s_type").text("是否确认删除" + row.ttype + "?");
					$("#delete").attr("onclick","to_delete("+row.tid+")");
					$("#myModal_delete").modal('show');
				}
			};
			$("#table").bootstrapTable({ // 对应table标签的id
				url : "combo/getAllCombo", // 获取表格数据的url
				// method: 'GET',                      //请求方式（*）
				// toolbar: '#toolbar',              //工具按钮用哪个容器
				striped : true, //是否显示行间隔色
				cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
				pagination : false, //是否显示分页（*）
				sortable : true, //是否启用排序
				sortOrder : "desc", //排序方式
				sidePagination : "client", //分页方式：client客户端分页，server服务端分页（*）
				pageNumber : 1, //初始化加载第一页，默认第一页,并记录
				pageSize : 8, //每页的记录行数（*）
				pageList : [ 8, 16, 24, 32 ], //可供选择的每页的行数（*）
				search : true, //是否显示表格搜索
				strictSearch : true,
				showColumns : true, //是否显示所有的列（选择显示的列）
				showRefresh : true, //是否显示刷新按钮
				// searchOnEnterKey: true, //ENTER键搜索  
				minimumCountColumns : 2, //最少允许的列数
				clickToSelect : true, //是否启用点击选中行
				// height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
				uniqueId : "ID", //每一行的唯一标识，一般为主键列
				showToggle : true, //是否显示详细视图和列表视图的切换按钮
				cardView : false, //是否显示详细视图
				detailView : false, //是否显示父子表
				queryParams : function(params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
					return {
						pageSize : params.limit, // 每页要显示的数据条数
						offset : params.offset, // 每页显示数据的开始行号
						sort : params.sort, // 要排序的字段
						sortOrder : params.order, // 排序规则
						dataId : $("#dataId").val()
					// 额外添加的参数
					}
				},
				sortName : 'id', // 要排序的字段
				sortOrder : 'desc', // 排序规则
				columns : [ {
					field : 'tid',
					title : '套餐编号',
					sortable : true,
					align : 'center',
				}, {
					field : 'ttype',
					title : '套餐类型',
					align : 'center'
				},	{
					field : 'tyear',
					title : '套餐时长',
					align : 'center'
				} ,
				{

					field : 'tprice',
					title : '套餐价格',
					sortable : true,
					align : 'center',
				}, {
					field : 'tcount',
					title : '套餐购买数量',
					sortable : true,
					align : 'center',
				}, {
					field : 'operate',
					title : '操作',
					width : 120,
					align : 'center',
					valign : 'middle',
					formatter : addFunctionAlty,
					events : operateEvents,
				// action: actionEvents,
				},

				]
			});
			$('#table').bootstrapTable('hideColumn','tid');
			//操作栏的格式化
			// function actionFormatter(value, row, index) {
			//     var id = value;
			//     var result = "";
			//     result += "<a href='javascript:;' class='btn btn-xs green' οnclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";
			//     // result += "<a href='javascript:;' class='btn btn-xs blue' οnclick=\"EditViewById('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
			//     // result += "<a href='javascript:;' class='btn btn-xs red' οnclick=\"DeleteByIds('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
			//     return result;
			// }
		</script>



		<!-- <script src="layui/jquery.min.js"></script> -->
		<script>
			$(function() {

			})
			function sercherBydate() {
				alert($("#test3"));
			}
		</script>

		<script src="layui/layui.all.js"></script>
		<script>
			//Demo
			layui.use('form', function() {
				var form = layui.form;

				//监听提交
				form.on('submit(formDemo)', function(data) {
					layer.msg(JSON.stringify(data.field));
					return false;
				});
			});
			function to_change(id) {
				$.ajax({
					type : "post",
					async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
					url : "combo/updateCombo", //请求发送
					data : {
						tid:id,
						tprice:$("#t_price").val()
					},
					success : function(result) {
						if(result=="成功"){
							alert("修改成功!");
							location.reload();
						}else{
							alert("修改失败")
						}
					},
					error : function(errorMsg) {
						//请求失败时执行该函数
						alert("错误");
					}
					})
			}
			function to_delete(id) {
				$.ajax({
					type : "post",
					async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
					url : "combo/delCombo", //请求发送
					data : {
						tid:id
					},
					success : function(result) {
						if(result=="成功"){
							alert("删除成功!");
							location.reload();
						}else{
							alert("删除失败")
						}
					},
					error : function(errorMsg) {
						//请求失败时执行该函数
						alert("错误");
					}
					})
			}
			function toadd() {
				$("#myModal_add").modal('show');
			}
			$("#add").click(function(){
				$.ajax({
					type : "post",
					async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
					url : "combo/addCombo", //请求发送
					data : {
						ttype:$("#a_ttype").val(),
						tprice:$("#a_price").val(),
						tyear:$("#a_tyear").val()
					},
					success : function(result) {
						if(result=="成功"){
							alert("新增成功!");
							location.reload();
						}else{
							alert("新增失败")
						}
					},
					error : function(errorMsg) {
						//请求失败时执行该函数
						alert("错误");
					}
					})
			})
		</script>
</body>
</html>

